<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/js/layui.js"></script>
</head>
<body>
    <div class="layui-fluid">
<!--        水平导航-->
<!--        <ul class="layui-nav" lay-filter="">-->
<!--            <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--            <li class="layui-nav-item layui-this"><a href="">产品</a></li>-->
<!--            <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">解决方案</a>-->
<!--                <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--                    <dd><a href="">移动模块</a></dd>-->
<!--                    <dd><a href="">后台模版</a></dd>-->
<!--                    <dd><a href="">电商平台</a></dd>-->
<!--                </dl>-->
<!--            </li>-->
<!--            <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--        </ul>-->

<!--        垂直导航-->
<!--        <ul class="layui-nav layui-nav-tree" lay-filter="">-->
<!--            <li class="layui-nav-item"><a href="">最新活动</a></li>-->
<!--            <li class="layui-nav-item"><a href="">产品</a></li>-->
<!--            <li class="layui-nav-item layui-this"><a href="">大数据</a></li>-->
<!--            <li class="layui-nav-item">-->
<!--                <a href="javascript:;">解决方案</a>-->
<!--                <dl class="layui-nav-child"> &lt;!&ndash; 二级菜单 &ndash;&gt;-->
<!--                    <dd><a href="">移动模块</a></dd>-->
<!--                    <dd><a href="">后台模版</a></dd>-->
<!--                    <dd><a href="">电商平台</a></dd>-->
<!--                </dl>-->
<!--            </li>-->
<!--            <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--        </ul>-->

<!--        侧边导航-->
        <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="">
            <li class="layui-nav-item"><a href="">最新活动</a></li>
            <li class="layui-nav-item layui-this"><a href="">产品</a></li>
            <li class="layui-nav-item"><a href="">大数据</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">解决方案</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">社区</a></li>
        </ul>
    </div>

    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;

            //…
        });
    </script>
</body>
</html>